<template>
<div>
<el-swiper :list="swiper"/>

  <div v-for="item of list" :key="item.id">
    <van-card
        @click="$router.push(`/kdetail?id=${item.id}`)"
        :title="item.courseTitle"
        :thumb="item.coverPicture" >
      <template #tags>
        <div style="font-size: 14px;height: 60px;overflow: hidden">
          <div v-html="item.courseIntroduction"></div>
          <template>
            
          </template>
        </div>
      </template>
      <template #footer>
        <van-button size="mini">阅读更多</van-button>
      </template>
    </van-card>
    <van-divider />
  </div>
  <van-empty v-if="!((list).length)" description="没有更多～" />
  <div v-if="total>list.length" style="text-align: center">
    <van-button size="mini">点击加载</van-button>
  </div>
</div>
</template>

<script>
import { keCheng } from "@/api/kecheng";
import { getSwiper } from "@/api/swiper";

export default {
  name: "kecheng",
  data() {
    return {
      total:0,
      current:1,
      list:[],
      swiper:[]
    }
  },
  created() {
    this.getList()
    getSwiper(4).then(res=>{
      this.swiper = res.records
    })
  },
  methods: {
    getList(){
      keCheng({
        size:10,
        current:this.current,
        params:this.$route.query.dictValue
      }).then(res=>{
        console.log(res)
        this.total = res.total
        this.current = res.current
        this.list = res.records
      })
    }
  }
}
</script>

<style scoped>
>>>.van-card__thumb{
  width: 120px;
  height: 120px;
}
.van-card{
  background-color: #fff;
}
>>>.van-card__content{
  font-size: 16px;
}
>>>.van-card__title{
  line-height: normal;
}
</style>
